<nz-spin [nzSpinning]="isSpinning" nzTip="正在登录中...">
  <div id="box">
    <div class="login-box">
      <div class="login-logo">
        <h1>{{title}}</h1>
      </div>
      <div class="card">
        <div class="card-body">
          <form nz-form [formGroup]="validateForm" class="login-form" (ngSubmit)="login()">
            <nz-form-item>
              <nz-form-control>
                <nz-input-group [nzPrefix]="prefixUser">
                  <input type="text" nz-input formControlName="userNameOrEmail" placeholder="请输入用户名或邮箱地址" />
                </nz-input-group>
                <nz-form-explain
                  *ngIf="validateForm.get('userNameOrEmail')?.dirty && validateForm.get('userNameOrEmail')?.errors">
                  请输入用户名或邮箱地址!</nz-form-explain>
              </nz-form-control>
            </nz-form-item>
            <nz-form-item>
              <nz-form-control>
                <nz-input-group [nzPrefix]="prefixLock">
                  <input type="password" nz-input formControlName="password" placeholder="请输入密码" />
                </nz-input-group>
                <nz-form-explain *ngIf="validateForm.get('password')?.dirty && validateForm.get('password')?.errors">
                  请输入密码!
                </nz-form-explain>
              </nz-form-control>
            </nz-form-item>
            <nz-form-item style="margin-bottom:0 !important;">
              <nz-form-control>
                <label nz-checkbox formControlName="remember">
                  <span>记住我</span>
                </label>
                <a class="login-form-forgot" class="login-form-forgot">忘记密码？</a>
                <button nz-button class="login-form-button" [nzType]="'primary'">登录</button>
                <a href="">注册帐号</a>
              </nz-form-control>
            </nz-form-item>
          </form>
          <ng-template #prefixUser><i nz-icon type="user"></i></ng-template>
          <ng-template #prefixLock><i nz-icon type="lock"></i></ng-template>
        </div>
      </div>
    </div>
  </div>
</nz-spin>